!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="cn">
        <div class="cude">
    <div class="side a">1</div>
    <div class="side b">2</div>
    <div class="side c">3</div>
    <div class="side d">4</div>
    <div class="side e">5</div>
    <div class="side f">5</div>
    <div class="side g">6</div>
    </div>
    </div>
    <style>
    body{background-color: #1d0cdb;
    text-align: center;}
    .cn{
        position: relative;
        perspective:808px;
        perspective-origin:top right;
        width:400px;
        height:400px;
        margin:400px auto;
        border:2px solid rgb(142, 62, 62);
        border-radius: 4px;}

    .cude{position: absolute;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
    
           margin: auto;
            left: 50%;
           top: 50%;    
           transform: translate(-50%, -50%);
            animation: move 5s ease-in-out infinite;}

            .side{position: absolute;
            width: 100%;
             height: 100%;
             opacity: 0.6;
            border: 2px solid white  ;
            line-height: 200px; }

            .a{background-color: #0f0303;
            transform: translateZ(100px);
             background:url(./2.jpg) no-repeat center/contain;}
            .b{ background-color: #8818c0;
              transform: rotateY(180deg) translateZ(-100px); }
            .c{background-color: rgb(25, 61, 61);
            transform: translateX(-100px) rotateY(-90deg);}
            .d{background-color: #043a14;
                transform: translateX(-100px) rotateY(-90deg); }
            .e{background-color: #a3d619;
                transform: translateX(100px) rotateY(90deg);} 
            .f{background-color: #db5dc4;
                transform: translatey(-100px) rotatex(90deg);}
             .g{background-color: #58dcac;
                transform: translatey(100px) rotatex(-90deg);}   
                @keyframes move{
                    from{transform: translate(-50%, -50%) rotateY(0deg) rotateX(720deg) rotateZ(20deg);}
                    to{transform: translate(-50%, -50%) rotateY(360deg) rotateX(0deg) rotateZ(0deg);}
                }    
    </style>
</body>
</html>